<template>
  <div class="lb-edit-card">
    <top-nav />
    <div class="page-main">
      <lb-classify-title title="限制更改"></lb-classify-title>
      <div style="height: 20px"></div>
      <el-form
        @submit.native.prevent
        :model="subForm"
        :rules="subFormRules"
        ref="uploadForm"
        label-width="180px"
        class="upload-form"
      >
        <el-form-item label="限制员工不可更改" prop="voice">
          <el-checkbox-group v-model="checkList">
            <div
              v-for="(item, index) in updateList"
              :key="index"
              :style="{
                display: 'inline-block',
                marginLeft: index === 0 ? 0 : '15px'
              }"
            >
              <el-checkbox
                :label="item.title"
                :disabled="item.disabled"
              ></el-checkbox>
              <lb-tool-tips v-if="item.tips">{{ item.tips }}</lb-tool-tips>
            </div>
          </el-checkbox-group>
        </el-form-item>
      </el-form>

      <lb-classify-title title="个人简介"></lb-classify-title>
      <div style="height: 20px"></div>

      <el-form
        @submit.native.prevent
        :model="newForm"
        ref="newForm"
        label-width="180px"
        class="upload-form"
      >
        <el-form-item label="语音介绍" prop="voice_text">
          <div class="upload-file-warp">
            <input
              type="text"
              class="choice-file-input"
              v-model="newForm.voice_text"
              placeholder="选择语音文件"
            />
            <lb-cover
              type="button"
              fileType="audio"
              @selectedFiles="getVoice"
            ></lb-cover>
          </div>
        </el-form-item>
        <el-form-item label="语音时长" prop="voice_time">
          <el-input
            class="item-short"
            v-model="newForm.voice_time"
            placeholder="请输入时长"
          ></el-input
          ><span>秒</span>
        </el-form-item>
      </el-form>
      <el-form
        @submit.native.prevent
        :model="newForm"
        ref="newForm"
        :inline="true"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="个性签名" prop="my_sign">
          <el-input
            class="long-item"
            type="textarea"
            :rows="5"
            v-model="newForm.my_sign"
            placeholder="请输入个性签名"
          ></el-input>
        </el-form-item>
      </el-form>
      <div style="height: 20px"></div>
      <lb-classify-title title="背景音乐"></lb-classify-title>
      <div style="height: 20px"></div>

      <el-form
        @submit.native.prevent
        :model="oldForm"
        ref="oldForm"
        label-width="180px"
        class="basic-form"
      >
        <el-form-item label="默认音频" prop="default_voice">
          <div class="upload-file-warp">
            <input
              type="text"
              class="choice-file-input"
              v-model="oldForm.default_voice"
              placeholder="选择音乐文件"
            />
            <lb-cover
              type="button"
              fileType="audio"
              @selectedFiles="getBgMusic"
            ></lb-cover>
          </div>
        </el-form-item>
        <el-form-item label="自动播放" prop="bg_switch">
          <el-radio-group v-model="oldForm.default_voice_switch">
            <el-radio :label="0">{{ $t('action.OFF') }}</el-radio>
            <el-radio :label="1">自动播放</el-radio>
          </el-radio-group>
          <lb-tool-tips>{{ tips[1] }}</lb-tool-tips>
        </el-form-item>
        <div style="height: 20px"></div>
        <lb-classify-title title="我的视频"></lb-classify-title>
        <div style="height: 20px"></div>
        <el-form
          @submit.native.prevent
          :model="oldForm"
          ref="oldForm"
          label-width="180px"
          class="basic-form"
        >
          <el-form-item label="封面图" prop="default_video_cover">
            <lb-cover
              :fileList="oldForm.default_video_cover"
              @selectedFiles="getVideoCover"
            ></lb-cover>
            <lb-tool-tips>图片建议尺寸: 600 * 400</lb-tool-tips>
          </el-form-item>
          <el-form-item label="默认视频" prop="default_video">
            <div class="upload-file-warp">
              <input
                type="text"
                class="choice-file-input"
                v-model="oldForm.default_video"
                placeholder="选择视频文件"
              />
              <lb-cover
                type="button"
                fileType="video"
                @selectedFiles="getVideo"
              ></lb-cover>
            </div>
          </el-form-item>
        </el-form>
        <div style="height: 20px"></div>
        <lb-classify-title title="VR全景"></lb-classify-title>
        <div style="height: 20px"></div>
        <el-form
          @submit.native.prevent
          :model="oldForm"
          ref="oldForm"
          label-width="180px"
          class="basic-form"
        >
          <el-form-item label="VR标题" prop="vr_tittle">
            <el-input
              class="long-item"
              v-model="oldForm.vr_tittle"
              placeholder="请输入标题"
            ></el-input>
            <lb-tool-tips>{{ tips[2] }}</lb-tool-tips>
          </el-form-item>
          <el-form-item label="封面图" prop="vr_cover">
            <lb-cover
              :fileList="oldForm.vr_cover"
              @selectedFiles="getVRCover"
            ></lb-cover>
            <lb-tool-tips>图片建议尺寸: 750 * 699</lb-tool-tips>
          </el-form-item>
          <el-form-item label="链接类型" prop="vr_switch">
            <el-radio-group v-model="oldForm.vr_switch">
              <el-radio :label="1">网页</el-radio>
              <el-radio :label="0">小程序</el-radio>
            </el-radio-group>
          </el-form-item>
          <el-form-item prop="vr_path">
            <el-input
              class="long-item"
              v-model="oldForm.vr_path"
              :placeholder="
                oldForm.vr_switch === 0 ? '请输入小程序appid' : '请输入网页链接'
              "
            ></el-input>
            <lb-tool-tips
              >小程序跳转链接填写格式如下:
              <div class="mt-md">
                1、跳转到小程序首页
                <div class="mt-md c-link">
                  所需参数如下：
                  <div class="mt-sm">[1] appId</div>
                </div>
                <div class="mt-md">例如：wx581f0c1732ae745f</div>
              </div>
              <div class="mt-lg">
                2、跳转到小程序指定页面
                <div class="mt-md c-link">
                  所需参数如下：
                  <div class="mt-sm">[1] appId</div>
                  <div class="mt-sm">[2] ; (英文状态下的分号)</div>
                  <div class="mt-sm">[3] 页面路径及参数</div>
                </div>
                <div class="mt-md">
                  例如：wx581f0c1732ae745f;pages/user/home?key=1&staff_id=1
                </div>
              </div>
            </lb-tool-tips>
          </el-form-item>
        </el-form>

        <div style="height: 20px"></div>
        <lb-classify-title title="我的照片"></lb-classify-title>
        <div style="height: 20px"></div>

        <el-form
          @submit.native.prevent
          :model="newForm"
          ref="newForm"
          label-width="180px"
          class="basic-form"
        >
          <el-form-item label="详情图" prop="my_photo_cover">
            <lb-cover
              type="more"
              :fileList="newForm.my_photo_cover"
              @selectedFiles="selectedFiles($event, 'my_photo_cover')"
              @moveFiles="moveFiles($event, 'my_photo_cover')"
              :fileSize="50"
            ></lb-cover>
            <lb-tool-tips>图片建议尺寸：750 * n</lb-tool-tips>
          </el-form-item>
          <el-form-item label="跳转链接" prop="my_photo_link">
            <el-input
              class="long-item"
              v-model="newForm.my_photo_link"
              placeholder="请输入详情图跳转链接"
            ></el-input>
            <lb-tool-tips
              >点击详情图片跳转网页，开启大图模式则展示大图</lb-tool-tips
            >
          </el-form-item>
        </el-form>

        <el-form-item>
          <lb-button @click="submitFormInfo(2)" type="primary">{{
            $t('action.submit')
          }}</lb-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
export default {
  data () {
    return {
      tips: {
        1: `进入员工${this.$t('menu.BusinessCard')}后的背景音乐是否自动播放`,
        2: `${this.$t('menu.BusinessCard')}详情页VR展示的版块的标题`
      },
      newForm: {},
      oldForm: {},
      checkList: [],
      updateList: [{
        title: '语音介绍',
        name: 'voice_switch'
      }, {
        title: '个性签名',
        name: 'personal_switch'
      }, {
        title: '我的照片',
        name: 'photo_switch',
        tips: '选中保存后，员工在小程序端将不能更改选中项内容'
      }]
    }
  },
  created () {
    this.submitFormInfo(1)
  },
  methods: {
    submitFormInfo (type) {
      let newForm = JSON.parse(JSON.stringify(this.newForm))
      let oldForm = JSON.parse(JSON.stringify(this.oldForm))
      let updateList = JSON.parse(JSON.stringify(this.updateList))
      let checkList = JSON.parse(JSON.stringify(this.checkList))
      console.log(checkList, '======chekc')
      if (type === 2) {
        updateList.map((item) => {
          newForm[item.name] = 0
          checkList.map((citem) => {
            if (item.title === citem) {
              newForm[item.name] = 1
            }
          })
        })
        newForm.my_photo_cover = newForm.my_photo_cover.length > 0 ? newForm.my_photo_cover.map(item => {
          return item.url
        }) : ''
        oldForm.vr_cover = oldForm.vr_cover.length > 0 ? oldForm.vr_cover[0].url : ''
        oldForm.default_video_cover = oldForm.default_video_cover.length > 0 ? oldForm.default_video_cover[0].url : ''
      }
      let param = type === 1 ? '' : {
        new_setting: newForm,
        old_setting: oldForm
      }
      this.$api.getCardDefaultSetting(param).then(res => {
        if (res.code === 200) {
          if (type === 1) {
            let resNewForm = res.data.new_setting
            let resOldForm = res.data.old_setting
            updateList.map(item => {
              if (resNewForm[item.name] === 1) {
                this.checkList.push(item.title)
              }
            })
            resNewForm.my_photo_cover = resNewForm.my_photo_cover.length > 0 ? resNewForm.my_photo_cover.map(item => {
              return {
                url: item
              }
            }) : []
            resOldForm.vr_cover = resOldForm.vr_cover ? [{ url: resOldForm.vr_cover }] : ''
            resOldForm.default_video_cover = resOldForm.default_video_cover ? [{ url: resOldForm.default_video_cover }] : ''
            this.newForm = resNewForm
            this.oldForm = resOldForm
          } else {
            this.$message.success(this.$t('tips.successSub'))
          }
        }
      })
    },
    /**
       * @method 获取视频封面图
       */
    getVideoCover (imgs) {
      this.oldForm.default_video_cover = imgs
    },

    /**
       * @method 获取VR封面图
       */
    getVRCover (imgs) {
      this.oldForm.vr_cover = imgs
    },

    /**
       * @method 获取背景音乐
       */
    getBgMusic (file) {
      let len = file.length - 1
      this.oldForm.default_voice = file[len].url
    },

    /**
       * @method 获取语音文件
       */
    getVoice (file) {
      let len = file.length - 1
      this.newForm.voice_text = file[len].url
    },
    /**
       * @method 获取视频文件
       */
    getVideo (file) {
      let len = file.length - 1
      this.oldForm.default_video = file[len].url
    },
    /**
       * @method 获取我的照片
       */
    selectedFiles (imgs, key) {
      this.newForm[key].push(...imgs)
    },
    moveFiles (imgs, key) {
      this.newForm[key] = imgs
    }
  }
}
</script>

<style lang="scss" scoped>
.lb-edit-card {
  width: 100%;

  .el-form {
    // margin: 20px 0;

    .tag-box {
      width: 900px;

      .el-tag {
        margin-right: 5px;
      }
    }
  }

  .el-input {
    width: 300px;
  }

  .el-select {
    width: 300px;
  }

  .basic-form {
    .el-cascader,
    .el-select {
      // width: 300px;
      width: 435px;
    }

    .long-item {
      width: 435px;
      // width: 708px;
      margin-right: 6px;
    }
  }
  .relevant-form {
    padding-left: 80px;
    width: 900px;

    .el-input {
      width: 160px;
    }
  }

  .upload-form {
    .el-input {
      width: 500px;
    }

    .item-tips {
      font-size: 12px;
      color: #aaafbb;
    }

    .item-short {
      width: 150px;
      margin-right: 10px;
    }
  }

  .set-form {
    .el-input {
      width: 500px;
    }
  }

  .auth-inner {
    display: flex;
    height: 400px;

    &-box {
      flex: 1;

      // background: #f60;
      &:last-child {
        border-left: 1px solid;

        > p {
          height: 40px;
          line-height: 40px;
          padding: 0 10px;
        }

        .data-box {
          padding: 0 20px;

          .department {
            // height: 300px;
            &-item {
              display: flex;
              justify-content: space-between;
              align-items: center;
              padding: 0 20px;
              margin-bottom: 10px;

              span {
                i {
                  color: #09f;
                }
              }

              i {
                cursor: pointer;
                display: inline-block;
                width: 16px;
                height: 16px;
                border-radius: 2px;
                font-size: 14px;
                text-align: center;
                line-height: 16px;

                &:hover {
                  background: #dcdfe6;
                }
              }
            }
          }
        }
      }

      .data-box {
        margin-top: 20px;
        height: 340px;
      }
    }
  }
}
</style>
